Add dialog demo #4
Conversation
| margin: unset; | ||
| text-align: center; | ||
| text-wrap: balance; | ||
| transition: |
There was a problem hiding this comment.
Could we also add a slight movement transition from the bottom? I think from bottom: -20px to bottom: 0px makes it feel natural.
src/dialog/index.html
Outdated
| <article> | ||
| <h1 data-heading="main"> Popping up with the <code>dialog</code> element</h1> | ||
| <section> | ||
| <h2 data-heading> Some Jumping Spiders |
There was a problem hiding this comment.
Could we do a play on JS = jumping spiders?
"Less JS (JavaScript), More JS (Jumping Spiders)"
"Vanilla JS (but the JS is Jumping spiders)"
There was a problem hiding this comment.
What about "Less JS, More Jumping Spiders"? 🕷️🕸️
✅ Deploy Preview for oddbaseline ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
src/dialog/style.css
Outdated
| transition: | ||
| opacity var(--transition-timing-slower) ease-in, | ||
| overlay var(--transition-timing-fast) linear, | ||
| display var(--transition-timing-fast) linear, |
There was a problem hiding this comment.
the out animation is jumpy because display animates so much faster than opacity. Consider making display one of the slowest, so it doesn't disappear before it's done fading?
|
@mirisuzanne I think I addressed all of the nesting and animation issues, so this is ready for another quick look. |
There was a problem hiding this comment.
@dvdherron looks great. There's a little linting that I think would clean up the code some, but isn't essential and we've never discussed any 'rules for nesting' or anything. To me it reads better if the nested stuff can be ordered:
- properties
- variants (like
&[open]) - descendants (like
[data-heading])
Since there's specificity differences at play, I think that can all be reordered safely without impacting the cascade at all.
|
@mirisuzanne thanks. cleaned this up in 4fb757a |
Change into the src/dialog directory
Run npx http-server .
Open http://localhost:8080/